<template>
  <div id="problem"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'

const emits = defineEmits(['change'])

const init = (info) => {
  const chart = echarts.init(document.getElementById('problem'))

  const options = {
    grid: {
      top: '0', // 上边距
      bottom: '0', // 下边距
      left: '0', // 左边距
      right: '0' // 右边距
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}'
    },
    series: [
      {
        name: '发现问题',
        type: 'pie',
        radius: ['40%', '60%'],

        data: [
          {
            value: info.v7.two,
            name: '已整改',
            itemStyle: {
              color: '#6DC8E1' // 单独设置颜色
            }
          },
          {
            value: info.v7.three,
            name: '未整改',
            itemStyle: {
              color: '#3F95C2' // 单独设置颜色
            }
          }
        ]
      }
    ]
  }
  chart.setOption(options)

  setTimeout(() => {
    chart.resize()
  }, 0)

  // 监听窗口大小变化，调整地图大小
  window.addEventListener('resize', () => {
    chart.resize()
  })

  //监听点击
  chart.on('click', (e) => {
    console.log('点击', e)
    emits('change', {
      title: e.name,
      query: { rectifyFlag: e.name === '已整改' ? 1 : 0 }
    })
  })
}
defineExpose({ init })
</script>
<style scoped lang="scss">
#problem {
  width: 100%;
  height: 100%;
}
</style>
